<template>
	<view class="content confirmLend">
		<topBar title="还款确认" name="tit"></topBar>
		<view class="cardsBlock topCards">
			<view class="title">
				{{objName}}
			</view>
			<view class="info">
				<view class="top">
					<view class="tit"> 还款金额: </view>
					<view>￥ <text class="price">{{checkMoney}}</text></view>
				</view>
				<view><text>账户余额:</text> {{userInfo.balance}} </view>
			</view>
			<!-- <view class="bot">
				历史参考收益: <text class="pir">{{profit}}</text> 元（不代表未来收益）
			</view> -->
		</view>
		<radio-group class="block" @change="RadioChange">
			<view class="cardsBlock balance">
				<view class="payType">
					<radio value="0" class="redioCk" checked /> 余额支付
				</view>
				<view>
					{{checkMoney}}元
				</view>
			</view>
			<view class="cardsBlock balance">
				<view class="payType">
					<radio value="1" class="redioCk" /> 支付宝支付
				</view>
				<view>
					{{checkMoney}}元
				</view>
			</view>
			<view class="cardsBlock balance">
				<view class="payType">
					<radio value="2" class="redioCk" /> 银行卡支付
				</view>
				<view>
					{{checkMoney}}元
				</view>
			</view>
		</radio-group>

		<view class="labTitle">
			<label class="radio cl-main" @tap="redioHandle">
				<radio value="r2" class="redioCk" />我同意</label>
			<a href="" style='text-decoration:none;'>《用户服务协议》-+</a>&nbsp;
			<a href="" style='text-decoration:none;'>《风险提示》</a>
		</view>
		<view class="itBut">
			<ButtonItems :type="submitBut" @click="showModal" size="14" value="确认还款"></ButtonItems>
		</view>

		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">输入交易密码</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="content">
						<view class="">
							{{time.min || '00'}}:
							{{time.sec || '00'}}
							关闭订单
						</view>
					</view>
				</view>
				<view class="info">
					<br />
					<label class="radio cl-main">支付密码：</label>
					<input type="password" v-model="payPassword" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @click="submitHandle">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModalALi'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">支付宝扫一扫支付</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="content">
						<view class="">
							{{time.min || '00'}}:
							{{time.sec || '00'}}
							关闭订单
						</view>
					</view>
				</view>
				<view class="info">
					<br />
					<view class="qrimg">
						<tki-qrcode ref="qrcode" cid="qrcode" :val="val" :size="size" :unit="unit"  :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake"/>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<!-- <button class="cu-btn bg-green margin-left" @click="submitHandle">确定</button> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topBar from '../../components/TopBar.vue'
	import ButtonItems from '../../components/ButtonItems.vue'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				checkMoney : this.$route.query.checkMoney,
				orderNo:'',
				submitOpen: false,
				userInfo: {},
				radio: '0',
				modalName: '',
				payPassword: '',
				Loan: {},
				time: {},
				start_time: String,
				
				ifShow: true,
				val:'', // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				// background: '#b4e9e2', // 背景色
				// foreground: '#309286', // 前景色
				// pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		computed: {
			...mapState(['lendInfo']),
			amount() {
				return this.$route.query.amount
			},
			objName() {
				return this.$route.query.objName
			},
			submitBut() {
				return this.submitOpen ? 'big-blue' : 'big-gray'
			}
		},
		components: {
			topBar,
			ButtonItems,
			tkiQrcode
		},
		onLoad() {
			this.getInterface()
			//alert(this.checkMoney)
		},
		methods: {
			goPath(url) {
				uni.navigateTo({
					url
				});
			},
			createOrder(){
				this.request({
					url: 'bidding/orders/createOrder',
					method: 'POST',
				}).then(res => {
					this.val=res.data.result
					this.orderNo=res.data.msg
					this.listen()
	
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.data.msg
					});
				})
			},
			getInterface() {
				this.request({
					url: 'user/getUserInfo',
				}).then(res => {
					this.userInfo = res.data.result
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.data.msg
					});
				})
			},
			redioHandle() {
				this.submitOpen = true
			},
			showModal() {

						if (this.radio == 0 && this.submitOpen == true ) {
							this.modalName = 'DialogModal'
						}
						if (this.radio == 1 && this.submitOpen == true) {
							this.modalName = 'DialogModalALi'
							this.createOrder()
						
						}
						this.start_time=new Date().getTime()
						this.countDown()
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			countDown() {
				var interval = setInterval(() => {
					// 当前时间
					let nowTime = new Date().getTime();
					let endTime = new Date(this.start_time).getTime() + 5 * 60 * 1000;
					let startTime = new Date(this.start_time).getTime();
					// 已开始
					if (startTime - nowTime <= 0) {
						if (endTime - nowTime <= 0) {
							clearInterval(interval)
							this.modalName = ''
							uni.showToast({
								icon: 'none',
								title: '订单过期未支付已关闭，请重新下单'
							});
						} else {
							let time = (endTime - nowTime) / 1000;
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							this.time = {
								min: this.timeFormat(min),
								sec: this.timeFormat(sec)
							}
						}
					}
				}, 1000)
			},
			
			listen(){
				setInterval(function(){
					this.request({
						url: 'bidding/orders/queryOrderStatus',	
						method: 'GET',
						params:{orderNo : this.orderNo}
					}).then(res =>{
						alert(1)
						this.modalName = ''
						alert(JSON.stringify(res))
					})	
						},1000)
			},
			
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			submitHandle() {
				if (this.userInfo.balance < this.checkMoney) {
					uni.showToast({
						icon: 'none',
						title: '余额不足，请充值后再试！',
					});
					return false;
				}
				this.request({
					url: 'bidding/pay',
					method: 'POST',
					params: {
						payPassword:this.payPassword
					}
				}).then(res => {
					if(res.data.code==0){
						this.modalName='';
						this.goPath('/pages/borrow/success?title="支付成功"')
					}
				}).catch(err => {
					alert(err.data.msg)
					uni.showToast({
						icon: 'none',
						title: err.data.msg,
					});
				})

			}
		}
	}
</script>
<style>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
</style>
<style lang="scss">
	.confirmLend {
		font-size: 28upx;

		.topCards {
			margin-top: 40upx;
			padding: 0;

			.title,
			.bot {
				padding: 0 30upx;
				font-size: 28upx;
				line-height: 3;
				border-bottom: solid 1px $uni-border-color;
			}

			.bot {
				padding: 0 30upx;
				font-size: 28upx;
				line-height: 3;
				border: none;
				border-top: solid 1px $uni-border-color;
			}

			.info {
				padding: 30upx;
				display: flex;
				justify-content: space-between;

				.top {
					.tit {
						margin-bottom: 20upx;
					}
				}

				.price {
					font-size: 50upx;
				}
			}
		}

		.balance {
			display: flex;
			justify-content: space-between;
		}

		.labTitle {
			margin-top: 30upx;
			font-size: 24upx;
			margin: 5px 20px 0px 20px;
			color: $uni-text-color-grey;
		}

		.itBut {
			margin: 20upx auto;
			width: 86%;
		}

		.redioCk {
			position: relative;
			top: -4upx;
			transform: scale(0.6);
		}
	}
</style>
